<template>
	<view>
		<view class="kb-search-bar">
			<view class="margin-lr30">
				<up-search v-model="modelValue.keyword" :clearabled="true" actionText="搜索" :showAction="true"
					height="30" searchIconSize="22" @custom="onKeyword" @search="onKeyword"
					:animation="true"></up-search>
			</view>
			<u-dropdown @open="open" @close="close" :border-bottom="true" titleSize="14" height="40" ref="uDropdownRef"
				class="u-dropdown">
				<u-dropdown-item :title="areaLable">
					<view class="slot-content">
						<SubAreas :areas="areas" :height="height" v-on:selectok="onAreaSelectOk"
							v-on:changeItem="onAreaChange"></SubAreas>
					</view>
				</u-dropdown-item>

				<u-dropdown-item v-if="showPrice &&  zhutype < 4" :title="priceLabel">
					<view class="slot-content">
						<!-- slot-content start -->
						<SubPrice :items="siteparams?.price||{}" :headlabel="price_label" :height="height"
							@selectok="onPriceOk" />
						<!-- slot-content end -->
					</view>
				</u-dropdown-item>
				<u-dropdown-item v-if="showHuxing && zhutype < 4" :title="roomLabel">
					<view class="slot-content">
						<!-- slot-content start -->
						<SubMutItem :height="height" headlabel="选择户型" :items="roomOptions" @selectok="onRoomSelect" />

						<!-- slot-content end -->
					</view>
				</u-dropdown-item>
				<u-dropdown-item v-if="zhutype<4" title="更多">
					<view class="slot-content">
						<SubMutItem :height="height" :items="extendOptions" @selectok="onMutilSelect" />
					</view>
				</u-dropdown-item>

				<u-dropdown-item v-else title="类型">
					<view class="slot-content">
						<SubMutItem :height="height" :items="extendOptions" :isradio=1 @selectok="onMutilSelect" />
					</view>
				</u-dropdown-item>

				<u-dropdown-item v-if="zhutype>3" title="排序">
					<view class="slot-content">
						<SubMutItem :height="height" :items="OrderOptions" :isradio=1 @selectok="onMutilSelect" />
					</view>
				</u-dropdown-item>

			</u-dropdown>
		</view>
	</view>
</template>

<script>
	import util from '../../common/tools/utils';
	import _ from "underscore";
	import {
		addUnit,
		addStyle,
		deepMerge
	} from '@/uni_modules/uview-plus/libs/function/index.js';
	import SubAreas from "./components/sub-areas.vue"
	import SubPrice from "./components/sub-price.vue"
	import SubMutItem from "./components/sub-mut-item.vue"
	import {
		array
	} from '../../uni_modules/uview-plus/libs/function/test';
	export default {
		name: "kb-drop-search",
		components: {
			SubAreas,
			SubPrice,
			SubMutItem
		},
		props: {
			modelValue: {
				type: Object,
				default: {
					areas: {},
					prices: {},
					rooms: {},
					extend: {},
					keyword: "",
				}
			},
			areas: {
				type: Array,
				default: [],
			},
			width: {
				type: [String, Number],
				default: 0,
			},
			height: {
				type: [String, Number],
				default: 300,
			},
			rent_type: {
				type: [String, Number],
				default: 0, //默认二手房
			},
			zhutype: {
				type: [String, Number],
				default: 0, //默认二手房
			},
			showHuxing: {
				type: [Boolean, String, Number],
				default: true,
			},
			showPrice: {
				type: [Boolean, String, Number],
				default: true,
			},

		},
		emits: ['open', 'close', 'change', 'update:modelValue'],
		data() {
			return {
				siteparams: {},
			};
		},
		computed: {
			zhutype_props() {
				return this.zhutype;
			},
			areaLable() {
				let len = this.zhutype < 4 ? 3 : 6;
				if (this.modelValue.areas?.street?.title) {
					return this.modelValue.areas?.street?.title.slice(0, len)
				} else if (this.modelValue.areas?.area?.title) {
					return this.modelValue.areas?.area?.title.slice(0, len)
				} else {
					return '区域'
				}
			},
			priceLabel() {
				if (this.modelValue.prices?.isok) {
					if (this.modelValue.prices?.minprice)
						return this.modelValue.prices?.minprice.slice(0, 3) + '…' + (this.rent_type == 0 ? '万' : '元')
					else(this.modelValue.prices?.price)
					return this.modelValue.prices?.price.slice(0, 3) + '…' + (this.rent_type == 0 ? '万' : '元')

				}
				return '价格'
			},
			//户型搜索栏的名称
			roomLabel() {
				if (this.modelValue.rooms?.isok) {
					//把对象的键值对对换
					var room = _.invert(this.siteparams.room);
					var title = "户型"
					for (var r in this.modelValue.rooms.room) {
						if (this.modelValue.rooms.room[r])
							title = room[r]
					}
					return title;
				}
				return '户型'
			},
			price_label() {
				if (this.rent_type == 2) {
					return '自定义租房价格';
				} else {
					return '自定义价格范围';
				}
			},
			roomOptions() {
				var options = util.o2a(this.siteparams.room)
				return [{
					label: '选择户型',
					options: options,
					field: 'room'
				}]
			},
			extendOptions() {
				var chaoxiang = util.o2a(this.siteparams.chaoxiang)
				var sufix = util.o2a(this.siteparams.sufix); //面积
				var zhuangxiu = util.o2a(this.siteparams.zhaungxiu); //面积
				var disposition = util.o2a(this.siteparams.disposition); //标签
				if (this.zhutype == 2) {
					disposition = util.o2a(this.siteparams.rent_zhu);
				} else if (this.zhutype == 3) {
					disposition = util.o2a(this.siteparams.newhouse_tese);
				}
				if (this.zhutype < 4) {
					//二手房0租房2新房3
					return [{
							label: '建筑面积',
							options: sufix,
							field: 'sufix'
						},
						{
							label: '标签',
							options: disposition,
							field: 'disposition'
						},
						{
							label: '装修状况',
							options: zhuangxiu,
							field: 'zhuangxiu'
						},
						{
							label: '房屋朝向',
							options: chaoxiang,
							field: 'chaoxiang'
						},
					]
				}
				var renttype = util.o2a({
					'出售': 1,
					'出租': 2
				})
				var zutype = util.o2a({
					'新房': 3,
					'二手房': 0,
					'租房': 2,
					'商铺': 4,
					'厂库': 7,
					'仓库': 8,
					'写字楼': 9
				})
				var v = [
					//{label:'房源类型',options:zutype, field:'zhutype'},
					{
						label: '方式',
						options: renttype,
						field: 'rent_type'
					},
				];
				if (this.zhutype == 4) {
					//商铺
					var arrs = util.o2a(this.siteparams.hangye);
					v.push({
						label: '商铺类型',
						options: arrs,
						field: 'hangye'
					});
				}
				if (this.zhutype == 8) {
					var arrs = util.o2a(this.siteparams.cangku_used);
					v.push({
						label: '仓库用途',
						options: arrs,
						field: 'danyuan'
					});
				}
				if (this.zhutype == 9) {
					v.push({
						label: '装修状况',
						options: zhuangxiu,
						field: 'zhuangxiu'
					})
				}
				return v;
			},
			OrderOptions() {
				var order = util.o2a({
					'默认排序': 4,
					'发布时间降序': 1,
					'更新时间降序': 2,
					'价格降序': 3
				})
				var v = [{
					label: '排序方式',
					options: order,
					field: 'order'
				}, ];

				return v;
			},

			listStyle() {
				const style = {};
				if (this.width != 0) style.width = addUnit(this.width)
				if (this.height != 0) style.height = addUnit(this.height - 50)
				// 如果没有定义列表高度，则默认使用屏幕高度			 
				return deepMerge(style, addStyle(this.customStyle))
			}
		},
		watch: {

		},
		methods: {
			open() {
				this.$emit('open', this.height)
			},
			close() {
				this.$emit('close', this.height)
			},
			onAreaChange(value) {

			},
			//点击搜索框搜索按钮时候
			onKeyword(value) {

				this.$emit('update:modelValue', this.modelValue)
				this.$emit('change', this.modelValue)
			},
			//区域选择组件的返回处理
			onAreaSelectOk(value) {
				if (value.isok)
					this.modelValue.areas = value
				else
					this.modelValue.areas = {}
				//关闭下拉			
				this.$refs.uDropdownRef.close();
				this.$emit('change', this.modelValue)
				this.$emit('update:modelValue', this.modelValue)

			},
			onPriceOk(value) {
				if (value.isok)
					this.modelValue.prices = value
				else
					this.modelValue.prices = {}

				this.$refs.uDropdownRef.close();
				this.$emit('change', this.modelValue)
				this.$emit('update:modelValue', this.modelValue)
			},
			onRoomSelect(value) {
				if (value.isok)
					this.modelValue.rooms = value;
				else
					this.modelValue.rooms = {};

				this.$refs.uDropdownRef.close();
				this.$emit('change', this.modelValue)
				this.$emit('update:modelValue', this.modelValue)
			},
			onMutilSelect(value) {
				if (value.isok)
					this.modelValue.extend = value;
				else
					this.modelValue.extend = {}
				//
				this.$refs.uDropdownRef.close();
				this.$emit('change', this.modelValue)
				this.$emit('update:modelValue', this.modelValue)
			}
		},
		mounted() {

			util.getModuleData('webfront/siteparams', {
				zhutype: this.zhutype,
				rent_type: this.rent_type,
			}).then(
				ret => {
					this.siteparams = ret

				}
			);
		}
	}
</script>

<style lang="scss">
	.kb-search-bar {
		background: #ffffff;
		padding-top: 7px;
	}

	.cell-table1 {
		display: flex;
	}

	.slot-content {
		background: #ffffff !important;

	}

	.drop-content {

		.flex {
			display: flex;
			margin-top: 40rpx;
			padding-left: 40rpx;
			padding-right: 40rpx;
		}

		.radio-group {
			margin: 40rpx;
		}

	}

	.drop-action {
		display: flex;
		justify-content: center;

		&__cancel {
			flex-grow: 1;
		}

		&__ok {
			flex-grow: 1;
		}
	}
</style>